<template>
	<view class="comapnyTag_con">
		<view class="box_1">
			您最多可以添加10个{{ title }}，还可以添加自定义标签哦
		</view>
		<view class="box_2">
			<view :class="parseInt(item.selected) > 0 ? 'tag-item selected' : 'tag-item'"
				v-for="(item, index) in loopTags" :key="index" @click="tagClick(item)">
				{{ item.text }}
			</view>
		</view>
		<view class="clear"></view>
		<view class="box_3">
			<view class="add_self_tag" @click="handleCustom">自定义</view>
		</view>
		<view style="margin: 16px 16px 0;">
			<u-button shape="circle" type="primary" @click="handleSubmit">
				保存
			</u-button>
		</view>
		<!-- <u-modal v-model="showCustom" title="添加自定义标签" show-cancel-button @confirm="handleConfirm" get-container="body">
			<view class="box_4">
				<view class="self_input">
					<label>
						<input type="text" v-model="customText" maxlength="5" placeholder="请输入标签内容(最多5个字)" />
					</label>
				</view>
			</view>
		</u-modal> -->
		
		<view v-if="showCustom" class="op">
				  <view>
				  	<view class="model-wrapper">
						<view class="model-title">
							添加自定义标签
						</view>
						<view class="model-content">
							<view class="content-msg">
								<view class="captcha_box">
									<input placeholder-style="color:#757575;font-size:12px !important;"  type="text" v-model="customText" maxlength="5" placeholder="请输入标签内容(最多5个字)" />
								</view>
							</view>
						</view>
						<view class="model-footer u-border-top">
							<view class="model-footer-button u-border-right"  @click="showCustom=false">
								取消
							</view>
							<view class="model-footer-button" style="color: rgb(41, 121, 255);" @click="handleConfirm">
								确认
							</view>
						</view>
				  	</view>
				  </view>
		</view>
		
		
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name: 'CompanyTag',
		props: ['tag_arr', 'title'],
		computed: {
			...mapState({
				tagList:state=>state.classifyJobTag
			})
		},
		watch: {
			tagList(val) {
				this.loopTags = val
				this.initCB()
			}
		},
		data() {
			return {
				showCustom: false,
				selectedTags: [],
				loopTags: [],
				customText: ''
			}
		},
		created() {
			this.$store.dispatch('getClassify', 'jobTag')
			this.initCB()
		},
		methods: {
			initCB() {
				this.loopTags = this.tagList
				let interfaceTags = this.tag_arr
				if (interfaceTags.length ) {
					if(this.loopTags == '') return
					this.loopTags = this.loopTags.map(function(item) {
						let thisIndex = interfaceTags.findIndex(
							val => parseInt(item.id) === parseInt(val)
						)
						return {
							id: item.id,
							text: item.text,
							selected: thisIndex > -1 ? 1 : 0
						}
					})
					let _this = this
					interfaceTags.forEach(function(item) {
						if (!parseInt(item)) {
							_this.loopTags.push({
								id: '',
								text: item,
								selected: 1
							})
						}
					})
					this.syncSelectedTag()
				}
			},
			// 同步已选中标签
			syncSelectedTag() {
				this.selectedTags = this.loopTags.filter(
					item => parseInt(item.selected) > 0
				)
			},
			// 添加自定义标签
			handleCustom() {
				// 判断选中企业福利的数量
				if (this.selectedTags.length >= 10) {
					this.$refs.uTips.show({
						title: '您最多可以选择10个' + this.title,
						type: 'warning'
					})
					return false
				} else {
					this.showCustom = !this.showCustom
				}
			},
			// 自定义标签确定
			handleConfirm() {
				this.loopTags.push({
					id: '',
					text: this.customText,
					selected: 1
				})
				this.customText = ''
				this.syncSelectedTag()
				this.showCustom = false
			},
			// 选择标签
			tagClick(val) {
				let thisIndex = 0
				// 判断是否是自定义标签
				if (val.id) {
					thisIndex = this.loopTags.findIndex(
						item => parseInt(item.id) === parseInt(val.id)
					)
				} else {
					thisIndex = this.loopTags.findIndex(item => item.text === val.text)
				}
				if (this.loopTags[thisIndex].selected > 0) {
					this.$set(this.loopTags[thisIndex], 'selected', 0)
				} else {
					// 判断选中企业福利的数量
					if (this.selectedTags.length >= 10) {
						this.$refs.uTips.show({
							title: '您最多可以选择10个' + this.title,
							type: 'warning'
						})
					} else {
						this.$set(this.loopTags[thisIndex], 'selected', 1)
					}
				}
				this.syncSelectedTag()
			},
			// 保存
			handleSubmit() {
				let tagIdArr = []
				let tagTextArr = []
				this.selectedTags.forEach(function(item) {
					tagTextArr.push(item.text)
					if (item.id) {
						tagIdArr.push(item.id)
					} else {
						tagIdArr.push(item.text)
					}
				})
				this.$emit('handlerCloseTag', {
					tagIdArr,
					tagTextArr
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.comapnyTag_con{
		height: 100%;
	}
	.box_4 {
		width: 580rpx;
		margin: 0 auto;
		padding: 40rpx 0 60rpx;

		.self_input {
			width: 100%;
			border-bottom: 2rpx solid #e2e2e2;

			input {
				border: 0;
				padding: 20rpx 10rpx;
				font-size: 26rpx;
				color: #333333;
				width: 100%;

				&::placeholder {
					color: #c9c9c9;
				}
			}
		}
	}

	.box_3 {
		padding: 0 30rpx;

		.add_self_tag {
			font-size: 24rpx;
			color: #1787fb;
			border: 2rpx solid #1787fb;
			display: inline-block;
			padding: 9rpx 30rpx 9rpx 64rpx;
			background-image:$add_ico_blue;
			background-color:#f4f9ff;
			background-position:30rpx center;
			background-repeat:no-repeat;
			background-size: 28rpx;
			border-radius: 52rpx;
		}
	}

	.box_2 {
		padding: 20rpx 30rpx 0 30rpx;

		.tag-item {
			&.selected {
				background-color: #f4f9ff;
				color: #1787fb;
			}

			float: left;
			padding: 9rpx 24rpx;
			font-size: 24rpx;
			color: #999999;
			margin: 0 20rpx 20rpx 0;
			background-color: #f3f3f3;
			border-radius: 52rpx;
		}
	}

	.box_1 {
		width: 100%;
		font-size: 26rpx;
		color: #c9c9c9;
		padding: 25rpx 32rpx;
	}
	
	
	.op{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0,0,0,.5);
		z-index: 10000;
	}
	
	.model-wrapper{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 520rpx;
		height: auto;
		z-index: 10075;
		margin-top: 0rpx;
		border-radius: 12rpx;
		overflow: hidden;
		background-color: #fff;
	}
	
	.model-title{
		padding-top: 38rpx;
		font-weight: 500;
		text-align: center;
		color: #303133;
	}
	.model-content{
		.content-msg{
			padding: 38rpx;
			font-size: 24rpx;
			color: #606266;
			position: relative;
		}
	}
	.model-footer{
		display: flex;
		.model-footer-button{
			flex: 1;
			height: 82rpx;
			line-height: 82rpx;
			font-size: 26rpx;
			box-sizing: border-box;
			cursor: pointer;
			text-align: center;
			border-radius: 2rpx;
		}
	}
</style>
